<template>
  <el-card class="scheme">
    <template #header>
      <div class="card-header">
        <span style="font-weight: 600; font-size: 18px">方案查看</span>
        <span style="font-weight: 600; font-size: 18px;cursor: pointer; " @click="()=>{router.push('/')}">/方案论证</span>
      </div>
    </template>
    <div class="list">
      <div class="item" v-for="item in data.list" :key="item.id">
        <span @click="toPickScheme(item)" :style="{ color: data.pickID == item.id ? '#409eff' : '' }">{{ item.name }}</span>
        <el-popconfirm @confirm="confirmEvent(item.id)" :icon="InfoFilled" icon-color="red" confirm-button-text="确定" cancel-button-text="取消" title="是否确定删除?">
          <template #reference>
            <Delete />
          </template>
        </el-popconfirm>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { Delete, InfoFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import * as Cesium from "cesium";
import { getScheme, delScheme } from "../api/schemeApi";
import { toFlatten, changeHeight, clearFlatten } from "../tool/flatten";
import { reactive, getCurrentInstance, onMounted, onUnmounted } from "vue";
const { appContext } = getCurrentInstance();
const global = appContext.config.globalProperties;
import { useRouter } from "vue-router";
const router = useRouter()
const data = reactive({
  list: [],
  pickID: 0,
});

const confirmEvent = (id) => {
  delScheme({ id: id }).then((res) => {
    if (res.code == 200) {
      ElMessage.success("删除成功!");
      clearFlatten(global.$tileset);
      global.$viewer.entities.removeAll();
      initData();
    }
  });
};

const toPickScheme = (item) => {
  data.pickID = item.id;
  clearFlatten(global.$tileset);
  global.$viewer.entities.removeAll();
  let arr = Cesium.Cartesian3.fromDegreesArray(
    item.polygon.coordinates[0].flat()
  );
  toFlatten(global.$tileset, arr);
  if (item.tileHeight) {
    changeHeight(global.$tileset, item.tileHeight.toFixed(1));
  }
  global.$viewer.entities.add({
    polygon: {
      hierarchy: {
        positions: arr,
      },
      clampToGround: true,
      material: Cesium.Color.SLATEGREY,
    },
  });
  let pisitionArr = item.position.split(",").map((item) => {
    return Number(item);
  });
  const position = Cesium.Cartesian3.fromDegrees(...pisitionArr);
  const orientation = Cesium.Transforms.headingPitchRollQuaternion(
    position,
    Cesium.HeadingPitchRoll.fromDegrees(item.heading, 0, 0)
  );
  global.$viewer.entities.add({
    position: position,
    orientation: orientation,
    model: {
      uri: "/src/assets/model/" + item.src + ".gltf",
      minimumPixelSize: 10,
      scale: item.scale,
    },
  });
  let cameraPosition = item.cameraPosition.split(",").map((item) => {
    return Number(item);
  });
  let cameraOrt = item.cameraOrt.split(",").map((item) => {
    return Number(item);
  });
  global.$viewer.camera.flyTo({
    destination: new Cesium.Cartesian3(...cameraPosition),
    orientation: {
      heading: cameraOrt[0],
      pitch: cameraOrt[1],
      roll: cameraOrt[2],
    },
  });
};

const initData = () => {
  getScheme().then((res) => {
    if (res.code == 200) {
      data.list = res.data;
    }
  });
};

onMounted(() => {
  initData();
});

onUnmounted(() => {
  clearFlatten(global.$tileset);
  global.$viewer.entities.removeAll();
});
</script>
<style lang="scss">
.scheme {
  width: 25%;
  position: absolute;
  top: 4%;
  left: 4%;
  z-index: 999;
  font-size: 15px;
  font-weight: 600;

  .list {
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    .item {
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;

      &:not(:last-child) {
        border-bottom: 1px solid #dcdfe6;
      }

      span {
        cursor: pointer;
      }

      svg {
        width: 20px;
        cursor: pointer;

        &:hover {
          color: red;
        }
      }
    }
  }
}
</style>
